<template>
  <div class="createPost-container" style="max-height:60vh; overflow: auto;padding:10px;">
    <!--信件类别(0:普通信件,1:活动信件,2:回复信件,3:系统消息，4系统推送的消息（如登录锁定）)-->
    <div v-if="this.rowData.letterType === 0 ||this.rowData.letterType === 4 ">
      <el-row style="margin-bottom: 10px;">
        <el-col :span="4" v-if="message.sendName">
          <div class="grid-content bg-purple name">{{this.message.sendName}}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple time">{{this.message.sendTime}}</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">发至层级:</span>
            {{this.message.memberLevelName || '-'}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">发送会员:</span>
            {{this.message.memberAccount || '-'}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">标题:</span>
            {{this.message.letterType==4?'系统消息':this.message.title}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">正文:</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-html="this.message.content || '-'"></el-col>
      </el-row>
    </div>
    <!--信件类别(0:普通信件,1:活动信件,2:回复信件,3:系统消息)-->
    <div class v-if="this.rowData.letterType === 1">
      <el-row style="margin-bottom: 10px;">
        <el-col :span="4">
          <div class="grid-content bg-purple name">{{this.message.sendName}}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple time">{{this.message.sendTime}}</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">发至层级:</span>
            {{this.message.memberLevelName}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">发送会员:</span>
            {{this.message.memberAccount}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">标题:</span>
            {{this.message.title}}
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">正文:</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-html="this.message.content"></el-col>
      </el-row>
    </div>

    <!--信件类别(0:普通信件,1:活动信件,2:回复信件,3:系统消息)-->
    <div v-else-if="this.rowData.letterType == 2">
      <div style="margin-bottom: 20px;" class="resolve">
        <el-row style="margin-bottom: 10px;">
          <el-col style="margin-bottom: 10px;">
            <div class="grid-content bg-purple">{{this.message.sendTime}}</div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">账号:</span>
              {{this.message.sendName}}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">类别:</span>
              {{this.message.typeName}}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">标题:</span>
              {{this.message.title}}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">描述:</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>{{this.message.content}}</el-col>
        </el-row>
      </div>
      <div>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">{{this.message.replyTime | toTime}}</div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">回复人:</span>
              {{this.message.replyName}}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col>
            <div class="grid-content bg-purple">
              <span class="grid-title">回复内容:</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px;">
          <el-col v-html="this.message.replyContent"></el-col>
        </el-row>
      </div>
    </div>
    <div class="reply-box" v-else-if="this.rowData.letterType == 3">
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">{{this.message.sendTime}}</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-col>
          <div class="grid-content bg-purple">
            <span class="grid-title">标题:</span>
            {{this.message.title}}
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { userLetterDetailApi } from '@/services/api/letterSummary';
import { grid } from '@/build';

export default {
  name: 'letter-detail',
  components: {},
  mixins: [grid],
  props: ['id', 'rowData'],
  data() {
    return {
      form: {
        id: this.id,
      },
      message: {
        sendTime: undefined,
        sendName: undefined,
        memberLevelName: undefined,
        memberAccount: undefined,
        typeName: undefined,
        title: undefined,
        content: undefined,
        images: undefined,
        replyName: undefined,
        replyTime: undefined,
        replyContent: undefined,
      },
    };
  },
  mounted() {
    this.bindGet(userLetterDetailApi, 'message', {
      action: 'getGrid',
      sendingData: 'form',
    });
    this.getAll();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.image {
  width: 100px;
  height: 100px;
}
.grid-content {
  border-radius: 4px;
  min-height: 30px;
  max-width: 500px;
  word-wrap: break-word;
  padding: 5px 0;
}
.grid-title {
  color: #000;
  font-weight: bold;
  margin-right: 15px;
}
.time {
  width: 300px;
}
.resolve {
  background: #ccc;
  padding: 5px;
}
.name{
  color: #000;
  font-weight: bold;
}
</style>
